<template>
	<view class="h-fill">
		<uni-grid :column="2" :square="false" :showBorder="false" @change="handleGoodsChange">
			<uni-grid-item v-for="(item, index) in list" :key="item.id" :index="index">
				<view class="uni-flex uni-column" :class="(index + 1) % 2 == 0 ? 'goods-list_item_even' : 'goods-list_item_odd'">
					<view class="h-fill product-image" :style="{height: imageHeight + 'rpx'}">
						<u-lazy-load :borderRadius="[20, 0]" loading-img="/static/easy-loadimage/loading.gif" 
							error-img="/static/img/img_home_quesheng@2x.png" 
							:image="item.product.thumbnail" :height="imageHeight" img-mode="aspectFill"></u-lazy-load>
						<view class="sale-info">已售{{item.product.sale || "0"}}</view>
					</view>
					<view class="pad product-info">
						<view class="uni-text-normal uni-bold uni-ellipsis">{{item.product.name}}</view>
						<view class="uni-flex" style="color: #D61719;">
							<text class="uni-flex-extend r-mg">{{item.maxPeople || 2}}人团</text>
							<text class="uni-bold"> ¥ {{item.groupPrice || 0}}</text>
						</view>
						<view class="uni-flex align-center">
							<text class="uni-flex-extend">单人</text>
							<view>¥ {{item.product.price}}</view>
							<view class="uni-text-gray uni-text-del">¥ {{item.product.crossedPrice}}</view>
						</view>
					</view>
				</view>
			</uni-grid-item>
		</uni-grid>
		<uni-load-more :status="loadingStatus"></uni-load-more>
	</view>
</template>

<script>
	const imgRatio = 1.8;
	export default {
		name: 'GoodsList',
		data() {
			return {
				list: [],
				loadingStatus: 'noMore',
				page: 0,
				imageHeight: 300
			};
		},
		props: {
			storeId: {
				type: String,
				default: null
			},
			categoryId: {
				type: String,
				default: null
			},
			filter: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		created() {
			let sysInfo = uni.getSystemInfoSync();
			let widthPx = (sysInfo.windowWidth - uni.upx2px(20) * 3) / 2;
			let widthRpx = 750 * widthPx / sysInfo.windowWidth;
			this.imageHeight = widthRpx / imgRatio;
		},
		methods: {
			handleGoodsChange(e) {
				let groupGoods = this.list[e.detail.index]
				uni.navigateTo({
					url: "/pagesGroup/product-detail?groupId=" + groupGoods.id
				})
			},
			async reload() {
				if (this.loadingStatus == 'loading') {
					return
				}
				this.loadingStatus = 'onMore'
				this.page = 0
				this.list = []
				await this.loadMore()
				
			},
			async loadMore() {
				if (this.loadingStatus == 'loading' || this.loadingStatus == 'noMore') {
					return
				}
				let prevStatus = this.loadingStatus
				this.loadingStatus = 'loading'
				let query = {
					...this.filter,
					pageNum: this.page + 1,
				}
				if (!query.recommendStatus) {
					delete query.recommendStatus;
				}
				if (!query.categoryId) {
					delete query.categoryId;
				}
				if (!query.storeId) {
					delete query.storeId;
				}
				try{
					let res = await this.$http.getGroupGoods(query)
					if (res.records.length) {
						this.page += 1;
						this.list = this.list.concat(res.records)
					}
					if (res.total > this.list.length) {
						this.loadingStatus = 'more'
					} else {
						this.loadingStatus = 'noMore'
					}
				}catch(e){
					this.$log("error", e);
					this.loadingStatus = prevStatus;
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.goods-list_item_odd {
		padding: 0px 10upx 20upx 20upx;
	}
	.goods-list_item_even {
		padding: 0px 20upx 20upx 10upx;
	}
	.product-image {
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
		position: relative;
		.sale-info {
			position: absolute;
			top: 0;
			right: 0;
			border-top-right-radius: 20rpx;
			border-bottom-left-radius: 20rpx;
			background-color: #D61719;
			padding: 0 20rpx;
			color: #FFFFFF;
		}
	}
	.product-info {
		background-color: #fff;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}
</style>
